<template>
  <div class="box">
    <h1>我是父亲曹操:{{ money }}</h1>
    <button @click="handler">找我的儿子曹植借10元</button>
    <Son ref="son"></Son>
    <hr />
    <Dau></Dau>
  </div>
</template>

<script setup lang="ts">
//ref可以获取真实的DOM节点，可以获取到子组件实例VC
//$parent可以摘子组件内部获取到父组件的实例

import Son from "./Son.vue";
import Dau from "./Daughter.vue";
import { ref } from "vue";

let money = ref(100000);

//获取值组件的实例
let son = ref();
console.log(son);

//父组件内部事件的回调
const handler = () => {
  money.value += 10;
  son.value.money -= 10;

  son.value.run();
};

defineExpose({
  money,
});
</script>

<style scoped>
.box {
  width: 100vw;
  height: 500px;
  background: skyblue;
}
</style>
